function Vue(config) {
    const {el,data={},methods={}} = config;
    this.$data = data;
    this.$binds = {};
    for(let key in methods){
        Object.defineProperty(this,key,{
            get(){
                return methods[key];
            },
            set(v){
                methods[key] = v;
            }
        })
    }
    this.observe();

    this.$el = el;
    if(typeof el === "string"){
        this.$el = document.querySelector(el);
    }

    this.compile();

}

Object.assign(Vue.prototype,{
    observe(){
        for(let key in this.$data){
            this.$binds[key] = [];
            Object.defineProperty(this,key,{
                get(){
                    return this.$data[key];
                },
                set(v){
                    this.$data[key] = v;
                    //发布
                    this.$binds[key].forEach(watcher=>watcher.update(v))
                }
            })
        }
    },
    compile(){
        for(let i=0;i<this.$el.children.length;i++){
            const node = this.$el.children[i];
            if(node.hasAttribute("v-model")){
                const value = node.getAttribute("v-model");
                node.addEventListener("input",(e)=>{
                    this[value] = e.target.value;
                })
                node.value = this[value];
                //订阅
                this.$binds[value].push(new Watcher(node,'value'))


            }
            if(node.hasAttribute("v-html")){
                const value = node.getAttribute("v-html");
                node.innerHTML = this[value];
                //订阅
                this.$binds[value].push(new Watcher(node,'innerHTML'))

            }
            if(node.hasAttribute("v-text")){
                const value = node.getAttribute("v-text");
                node.innerText = this[value];
                //订阅
                this.$binds[value].push(new Watcher(node,'innerText'))

            }
        }
    }
})

function Watcher(node,prop){
    this.node = node;
    this.prop = prop;
}
Watcher.prototype.update = function (v){
    this.node[this.prop] = v;
}
export default Vue;